<style lang="less" scoped>
    .order-box{
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: column;
        .order-box_change{
            width: 100%;
            height: 40px;
            background: #fff;
            line-height: 40px;
            display: flex;
            padding-left: 13px;
            box-sizing: border-box;
            justify-content:flex-start;
            align-items: center;
            border-top: 1px solid #e5e5e5;
            img{
                width: 17px;
                height: 17px;
                display: block;
            }
            span{
                margin-left: 10px;
                font-size: 14px
            }
        }
        .order-box-info{
            display: flex;
            flex: 1;
            margin-top: 10px;
            flex-direction: column;
            li{
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #e5e5e5;
                width: 100%;
                background: #fff;
                overflow: hidden;
                .content{
                    background-color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 100px;
                    margin-right: 0;
                    -webkit-transition: all 0.4s;

                    transition: all 0.4s;
                    -webkit-transform: translateX(90px);
                    transform: translateX(90px);
                    margin-left: -90px;
                    .entInfo{
                        display: flex;
                        align-items: center;
                        flex:2.5;
                        .icon{
                            height:17px;
                            width:17px;
                            margin:10px 17px 10px 13px;
                        }
                        .proInfo{
                            display: flex;
                            align-items: center;
                            img{
                                width:60px;
                                height:60px;
                                margin: 10px 20px;
                            }
                            .sumarry{
                                flex: 1;
                                flex-direction: column;
                                display: flex;
                            }
                        }
                    }
                }
                .del{
                    background-color: #7A1634;
                    width: 90px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    -webkit-transform: translateX(90px);
                    transform: translateX(90px);
                    -webkit-transition: all 0.4s;
                    transition: all 0.4s;
                }
            }
            .touch-move-active .content, .touch-move-active .del {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
            .tar-color{
                color: #7A1634;
            }
        }
        .count-box{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: right;
            position: fixed;
            left: 0px;
            right: 0px;
            bottom: 50px;
            background: #fff;
            .crt-btn{
                width: 83px;
                height: 100%;
                display: inline-block;
                text-align: center;
                font-size: 14px;
                background: #7A1634;
                line-height: 40px;
                color: #fff;
                margin-left: 10px;
            }
            .tab-color{
                color: #7A1634;
            }
        }
    }
</style>
<template>
    <div class="order-box">
        <div class="order-box_change">
            <img :src="ySlectIcon" v-if="allSelect" @click="selectALL(false)"/>
            <img :src="yIcon" v-else @click="selectALL(true)"/>
            <span>全选</span>
        </div>
        <ul class="order-box-info">
            <li  
            @touchstart="touchstart"  
            @touchmove="touchmove" 
            :class="{'touch-move-active':item.isTouchMove}"
            :data-index="index" v-for="(item, index) in items" :key="index">
                <div class="content">
                    <div class="entInfo" @click="selectItem(item)">
                        <img class="icon" :src='ySlectIcon'  v-if="item.select" />
                        <img class="icon" :src='yIcon'  v-else/>
                        <div class="proInfo">
                            <img  mode='aspectFit'  src="http://img5.imgtn.bdimg.com/it/u=2623307874,1239411899&fm=27&gp=0.jpg"/>
                        </div>
                        <div class="sumarry">
                            <span>针织开衫韩版中长粗毛线毛衣外套</span> 
                            <span class="tar-color text-13">￥999</span>   
                            <div class="text-11">尺码：M 数量：1</div>
                        </div>
                        
                    </div>
                    

                </div>
                <view class="del" catchtap="del">删除</view>
            </li>
        </ul>
        <div class="count-box">
            <span class="text-14">合计：</span>
            <span class="text-14 tab-color">￥999</span>
            <span class="crt-btn" @click="goOrderDetail">去结算</span>
        </div>
        <foot-bar @card="toPage('card')"></foot-bar>
    </div>
</template>


<script>
import yIcon from '@/assets/images/yIcon.png'
import ySlectIcon from '@/assets/images/ySlectIcon.png'
import footBar from '@/components/foot-bar/index.vue'
export default {
	title:'购物车',
    data(){
        return {
            startX: 0, //开始坐标
            startY: 0,
           yIcon:yIcon,
           allSelect:false,
           items:[
               {
                   isTouchMove:false,
                   img:'我',
                   select:false
               },
               {
                   isTouchMove:false,
                   img:'你',
                   select:false
               }
           ],
           ySlectIcon:ySlectIcon
        }
    },
    methods: {
    	goOrderDetail() {
    		wx.navigateTo({
		        url: '/pages/order-detail/main'
		    })
    	},
        selectALL(flag){
            console.log(flag)
            this.allSelect= flag
            this.items.forEach((els) =>{
                els.select = flag
            })
            console.log(this.items)
        },
        selectItem(item){
            item.select = !item.select;
            let attr = this.items.filter((i) => {return i.select})
            this.allSelect = attr.length == this.items.length ? true : false
            
        },
        touchstart(e){
            this.cancelDel()
            console.log(e.clientX)
            this.startX = e.clientX
            this.startY = e.clientY
            
        },
        touchmove: function (e) {
            console.log(e)
            
            var that = this,
            index = e.mp.currentTarget.dataset.index,//当前索引
            startX = that.startX,//开始X坐标
            startY = that.startY,//开始Y坐标
            touchMoveX = e.clientX,//滑动变化坐标
            touchMoveY = e.clientY;//滑动变化坐标
            console.log(touchMoveX)
            //获取滑动角度
            let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
            this.items.forEach(function (v, i) {
                v.isTouchMove = false
                //滑动超过30度角 return
                if (Math.abs(angle) > 30) return;
                    if (i == index) {
                        if (touchMoveX > startX) //右滑
                        {
                        v.isTouchMove = false
                        }
                        else //左滑
                    {
                        v.isTouchMove = true
                    }
                }
            })
            
        },
        /**
         * 计算滑动角度
         * @param {Object} start 起点坐标
         * @param {Object} end 终点坐标
         */
        angle: function (start, end) {
            var _X = end.X - start.X,
            _Y = end.Y - start.Y
            //返回角度 /Math.atan()返回数字的反正切值
            return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
        },
        cancelDel(){
            //开始触摸时 重置所有删除
            this.items.forEach(function (v, i) {
            if (v.isTouchMove)
                v.isTouchMove = false;
            })
            
        }
    },
    components: {
		footBar
	}
}
</script>

